Thanks for joining me.
I have a challenge for you in this lecture.
Your goal is to replicate this guy you see on my screen as much as possible.
This guy should keep a consistent shape even when the screen is resized, and the objects within the
guy should also scale and keep a consistent shape.
This guy should also be able to fade out by only changing one transparency property.
So please take a few minutes of your time to recreate this guy you see on the screen.
This is a challenge I'm offering to you, and the only way for you to learn and remember UI design is
by practicing.
So please pause the video, work on your GUI and I'll show you my process of replicating this guy in
the next part of the video.
Okay, now the guy is in the corner of the screen.
Let me go ahead and create a new screen guy inside of starter Guy.
And now one of the first things that I need to do is I need to use a canvas group, because that's the
only way that I'm going to be able to fade out my entire guy from one property.
So let's go ahead and add a canvas group.
Let me go ahead and move this to the center of my screen.
And then I'm going to convert it to scale.
So that way I can scale it up or down.
And then I'll make sure to position it in the center of my screen.
So I'll have to adjust the anchor point to be 0.5 and 0.5.
There we go.
Now I also need to keep this canvas group in a consistent square shape, even when my screen is resized.
So we're going to add a UI aspect ratio constraint with an aspect ratio of one.
That way my canvas group will now always be a square.
And then let me also go ahead and increase the size of my canvas group.
So that way I can try to match the size as much as possible.
That looks good.
Now, the next thing I need to do is to create a grid layout inside of my guy to be able to display
all of these text labels in a grid.
Now, with my original guy here, if we take a look at it, you will notice that even the stroke of
the frame is within the bounds of the guy, and that means it's probably because we have a frame inside
of the canvas group with the stroke applied to it, and the frame inside is just sized down a little
bit to fit that stroke within the bounds of our frame.
Now we could just apply a stroke and a corner directly to our canvas group that we've inserted.
But that would mean that the stroke would be beyond the bounds of our canvas group, which may not be
desired.
And since I want to try and replicate this as much as possible, what I need to do is insert another
frame inside of here and apply a stroke on that and size it down a little bit.
So that way the stroke fits within the canvas group boundaries.
So let's go ahead and add a frame and let me go ahead and size it up.
So the scale should be one on the x axis as well as one on the y axis.
And then for my canvas group I need to completely make the background transparent.
And then for my regular frame, since the background transparency on the other one was slightly transparent.
Let's go ahead and do the same thing here.
We'll do something like 0.75.
And now with our frame, let's go ahead and add our UI stroke as well as the cornering to our UI.
Now you will notice that our UI stroke has been cut off, and that's because it's going outside the
bounds of our canvas group.
So we need to shrink our frame down a little bit to fit in our stroke.
However, the stroke on the other guy is a little bit thicker.
It's probably about 4 or 5 pixels thick.
So let's set the thickness to four.
And then for our frame let's decrease the size by four.
And then decrease the size by four on the y axis as well.
And you will notice that, hey, we got these two bottom corners to fill in, but we didn't get these
two top corners to fill in.
So let's go ahead and actually position this frame in the middle.
So we'll do 0.50.5 anchor point.
And then for the position we'll put it in the center of our canvas group as well.
And now, because our stroke is going to be four studs wide on every single side, we actually need
to subtract the size by a total of eight on the x axis and a total of eight on the y axis.
So there we go.
Now we have our stroke within our canvas group and it's visible.
The cornering looks pretty similar, but the cornering on this one is a little bit larger.
So let's go ahead and increase the offset to about maybe 12.
That looks about right.
And now the next thing we need to do is add a UI grid layout.
Now, I remember that when we were scaling the screen, the objects inside of the GUI were also scaling,
meaning we need to convert this cell size from scale to offset, but we also need to keep the size of
these text labels as a square.
So we're going to also have to use a UI aspect ratio constraint.
Let's add that inside of our UI grid layout.
And then let's go ahead and convert the cell size to be 0.25 on the x axis.
So that way we can fit in each of those different text labels.
We'll set offset to zero.
And then on the y axis we'll set that to zero as well.
And then we'll just set the scale equal to one.
It doesn't really matter because it's going to be limited by our x axis.
Now we can go ahead and add a text label.
Inside of here there's our text label.
Let's go ahead and make the background transparent.
And then let's go ahead and make sure we bold it and then italicize it as it looks like in the other
image.
And then it doesn't really matter what font you use.
I'm just going to pick a random font in here.
Like we'll do this one.
And then I'll make sure to scale the text.
And then I'll make sure to type out the message.
The best scripting course on Udemy.
Now we need to make our text color white, and then we need to apply a stroke around our text.
So let's go ahead and add a UI stroke to our text.
And let's increase the thickness.
Let me try to guesstimate what the thickness is.
It's probably around three and the color can stay at black which is nice.
And then we can go ahead and duplicate this and see if it fits well within.
And it looks like, uh oh, it's not fitting that well.
And that's because we need to change our UI grid layout padding.
So because we're padding by five pixels on the x axis, we need to shrink the size of our text labels
by five pixels on the x axis.
And then for the y axis, I think we also need to subtract that by five.
And then let's go ahead and duplicate.
There we go.
So we got our layer of 4x4 text labels.
And then we kind of notice how on this one, it's all nice and centered within the center of the frame.
So there's nice spacing between the left and the right and the top and the bottom.
So to do that let's go ahead and change the horizontal alignment in our grid layout.
We'll make that center.
And then for the vertical alignment we'll set that to center as well.
Now the last thing we need to do is we need to apply a gradient to the stroke of our frame.
So let's go back to our UI stroke.
Let's add a UI gradient.
And the color needs to be from red to blue.
So let's open up those three dots.
Let's make this color red.
And then let's make this color blue.
Close that out, and then we need to swap the color of the UI stroke to be white.
So that way we can see it.
And then we need to rotate it.
So let's rotate our UI gradient by 90 degrees.
And there we go.
It looks like we got as close as possible to the original guy here.
And if we resize the screen, as you can see that our canvas group is resizing down properly and all
the elements inside of the canvas group are also scaling properly.
Now, the reason it doesn't start scaling down until we hit the y axis on both the top and the bottom
is.
That's because what the size is set to.
So if I were to decrease this and set this to like 0.8 or something like that, now you're going to
notice once it gets within that range, now it's going to scale downwards.
If I decrease this even more, if I do like 0.5 now it's going to resize once it's basically taken up
half the screen across the y axis.
So it's scaling.
That way if I don't want it to scale down until it hits the edge of the screen, then I'll set that
back to one.
And then when I shrink the screen down now, it won't scale down until both edges on the y axis has
hit the screen.
But just like that, we are finished.
I hope you enjoyed this challenge, and I hope it gave you a better understanding of how to utilize
the many different GUI objects and constraints available to you to create GUIs.
See you in the next lecture.